<template>
    <el-container style="height:100%;">
        <el-header>
            {{$t('model.module')}}
            <el-button style="margin-left:20px" @click="complete">完成</el-button>
        </el-header>
        <el-main>
            <el-row>
                <el-col :span="8" style="max-width: 350px;">
                    <el-input placeholder="请输入内容" v-model="serachVal">
                        <el-button slot="append" type="primary" @click="serach">搜索</el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-row style="text-align: left;margin: 20px 0px;">
                <el-col>
                    <el-radio-group v-model="radio" >
                        <el-radio :label="1">全部</el-radio>
                        <el-radio :label="2">ERP</el-radio>
                        <el-radio :label="3">CMR</el-radio>
                        <el-radio :label="4">可视化测试数据源</el-radio>
                    </el-radio-group>
                    <el-dropdown @command="handleCommand" style="margin-left: 30px;">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>ERP</el-dropdown-item>
                            <el-dropdown-item>CMR</el-dropdown-item>
                            <el-dropdown-item>可视化测试数据源</el-dropdown-item>
                            <el-dropdown-item>ERP1</el-dropdown-item>
                            <el-dropdown-item>ERP2</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
            <!-- 智能推荐 -->
            <div>
                <el-row style="text-align: left;font-weight: bold;">
                    <label>智能推荐</label>
                    <el-checkbox style="margin-left:20px" v-model="all">全选</el-checkbox>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="5" class="tempo-table-detail" v-for="count in 6" :key="count">
                        <el-checkbox v-model="checked" style="float: left;padding-left: 20px;"></el-checkbox>
                        <div class="tempo-table-info">
                            <span style="font-weight: bold;">XXXXX的表单数据</span>
                            <span>ERP</span>
                        </div>
                        <i class="el-icon-document"></i>
                    </el-col>
                </el-row>
            </div>
            <hr />
            <!-- 待分类 -->
            <div style="text-align: left">
                <el-row>
                    <label style="font-weight: bold;">待分类</label>
                    <label style="margin-left:20px">采集过来还未分类的数据表</label>
                </el-row>
                <el-col :span="5" class="tempo-table-detail" v-for="count in 6" :key="count">
                    <el-checkbox v-model="checked" style="float: left;padding-left: 20px;"></el-checkbox>
                    <div class="tempo-table-info">
                        <span style="font-weight: bold;">待分类表单数据</span>
                        <span style="color:#ccc">order_number_table</span>
                    </div>
                    <i class="el-icon-document"></i>
                </el-col>
            </div>
        </el-main>
    </el-container>
</template>
<script>
    export default {
        data() {
            return {
                all: false, //智能全选
                radio: "",
                serachVal: ""
            };
        },
        components: {},
        mounted() {},

        methods: {
            serach() {},
            handleCommand() {},
            complete(){
                this.$router.push({
                    path: "/",
                });
            }
        }
    };
</script>
<style scoped>
    .el-header {
        line-height: 51px;
        text-align: start;
        background-color: rgba(243, 243, 243, 1);
    }
    .tempo-table-detail {
        border: 1px solid #cccccc;
        height: 100px;
        line-height: 100px;
        margin: 20px 10px 10px 20px;
    }
    .tempo-table-info {
        height: 50px;
        line-height: 30px;
        width: calc(100% - 80px);
        float: left;
        display: inline-grid;
        text-align: left;
        padding: 20px 0px;
        padding-left: 15px;
    }
</style>
